.page-user-coupon {
 min-height:100vh;
 padding:0 .24rem 1rem
}
.page-user-coupon .empty-page {
 padding:0 0 2rem;
 position:absolute;
 top:50%;
 left:50%;
 -webkit-transform:translate3d(-50%,-50%,0);
 transform:translate3d(-50%,-50%,0)
}
.page-user-coupon .coupon-tab {
 font-size:.3rem;
 border-bottom:1px solid #eee;
 margin-top:.2rem
}
.page-user-coupon .coupon-tab .flex {
 width:0
}
.page-user-coupon .coupon-tab .flex span {
 padding:.26rem 0;
 display:inline-block;
 color:#666
}
.page-user-coupon .coupon-tab .flex.on span {
 color:#ff3100;
 border-bottom:2px solid #ff3100
}
.page-user-coupon li {
 margin:.24rem 0;
 list-style:none;
 text-align:left
}
.page-user-coupon li em,
.page-user-coupon li i {
 font-style:normal
}
.page-user-coupon li .coupon-item {
 position:relative;
 z-index:1;
 width:6.72rem;
 height:2.8rem;
 background:-webkit-gradient(linear,left top,left bottom,from(#ff8a7f),to(#fc766a));
 background:-webkit-linear-gradient(top,#ff8a7f,#fc766a);
 background:linear-gradient(180deg,#ff8a7f,#fc766a);
 border-radius:.12rem;
 padding:0 .32rem;
 color:#fff;
 font-size:.24rem
}
.page-user-coupon li .coupon-item:after,
.page-user-coupon li .coupon-item:before {
 content:"";
 position:absolute;
 top:1.56rem;
 width:.32rem;
 height:.32rem;
 background:#fff;
 border-radius:50%
}
.page-user-coupon li .coupon-item:before {
 left:-.16rem
}
.page-user-coupon li .coupon-item:after {
 right:-.16rem
}
.page-user-coupon li .coupon-item .coupon-info {
 height:1.7rem;
 margin-left:-.24rem
}
.page-user-coupon li .coupon-item .coupon-info .coupon-type {
 width:2.14rem;
 text-align:center;
 font-size:.6rem;
 font-weight:700
}
.page-user-coupon li .coupon-item .coupon-info .coupon-type i {
 font-size:.36rem;
 vertical-align:baseline
}
.page-user-coupon li .coupon-item .coupon-info .coupon-type i.pd-right {
 padding-right:.08rem
}
.page-user-coupon li .coupon-item .coupon-info .coupon-type i.pd-left {
 padding-left:.08rem
}
.page-user-coupon li .coupon-item .coupon-info .coupon-desc {
 width:3.94rem
}
.page-user-coupon li .coupon-item .coupon-info .coupon-name {
 font-size:.28rem
}
.page-user-coupon li .coupon-item .coupon-info .coupon-useful {
 display:inline-block;
 margin-top:.1rem;
 max-width:100%;
 font-size:.2rem;
 padding:0 .06rem;
 line-height:1.6em;
 white-space:nowrap;
 overflow:hidden;
 text-overflow:ellipsis
}
.page-user-coupon li .coupon-item .coupon-info .coupon-useful:before {
 border-color:currentColor;
 border-radius:.04rem
}
.page-user-coupon li .coupon-item .coupon-info .coupon-date {
 margin-top:.1rem;
 font-size:.24rem
}
.page-user-coupon li .coupon-item .coupon-action {
 height:1.08rem
}
.page-user-coupon li .coupon-item .coupon-action .coupon-toggle {
 width:48%
}
.page-user-coupon li .coupon-item .coupon-action .coupon-toggle.more-expand .icon-arrow {
 -webkit-transform:rotate(180deg);
 transform:rotate(180deg)
}
.page-user-coupon li .coupon-item .coupon-action .coupon-toggle .icon-arrow {
 display:inline-block;
 margin-left:.12rem;
 width:.24rem;
 height:.24rem;
 vertical-align:middle;
 background:transparent url(../images/icon-arrow-down.82163bdc4f.png) no-repeat 50%;
 background-size:100% 100%;
 -webkit-transition:-webkit-transform .15s linear;
 transition:-webkit-transform .15s linear;
 transition:transform .15s linear;
 transition:transform .15s linear,-webkit-transform .15s linear
}
.page-user-coupon li .coupon-item .coupon-action .coupon-qrcode {
 width:.48rem;
 height:.48rem;
 background:transparent url(../images/icon-qrcode.74851293b0.png) no-repeat 50%;
 background-size:.36rem .36rem
}
.page-user-coupon li .coupon-item .coupon-action .coupon-btn {
 display:block;
 width:2rem;
 height:.56rem;
 line-height:.56rem;
 text-align:center;
 color:#fff
}
.page-user-coupon li .coupon-item .coupon-action .coupon-btn:before {
 border-color:currentColor;
 border-radius:.56rem
}
.page-user-coupon li .split-line {
 height:.02rem;
 background:transparent url(../images/split-line.png) no-repeat 50%;
 background-size:contain
}
.page-user-coupon li .coupon-more {
 text-align:left;
 color:#bbb;
 font-size:.24rem;
 line-height:1.4em;
 padding:.36rem .24rem .24rem;
 border:1px solid rgba(0,0,0,.15);
 border-top:0;
 border-radius:0 0 .12rem .12rem;
 margin-top:-.16rem
}
.page-user-coupon .expired .coupon-item,
.page-user-coupon .used .coupon-item {
 background:#d8d8d8
}
.page-user-coupon .xe-dialog-box {
 width:5rem;
 height:7.2rem;
 background:#f6f6f6;
 border-radius:.24rem;
 font-size:.24rem;
 overflow:hidden
}
.page-user-coupon .xe-dialog-box .xe-dialog-bg {
 height:3.2rem;
 background:-webkit-linear-gradient(312deg,#ff6b00,red);
 background:linear-gradient(138deg,#ff6b00,red);
 border-bottom-right-radius:2.5rem .5rem;
 border-bottom-left-radius:2.5rem .5rem
}
.page-user-coupon .xe-dialog-box .close {
 position:absolute;
 bottom:-1.28rem;
 left:50%;
 margin-left:-.34rem;
 width:.68rem;
 height:.68rem
}
.page-user-coupon .xe-dialog-box .close .icon-close {
 width:.68rem;
 height:.68rem;
 background-image:url(../images/icon-close-bordered.6c8271c7ce.png)
}
.page-user-coupon .xe-dialog-box .xe-dialog-content {
 position:absolute;
 top:0;
 left:0;
 right:0
}
.page-user-coupon .xe-dialog-box .coupon-info {
 color:#fff;
 margin-top:.4rem;
 padding:0 .6rem
}
.page-user-coupon .xe-dialog-box .coupon-info h6 {
 font-size:.32rem;
 white-space:nowrap;
 overflow:hidden
}
.page-user-coupon .xe-dialog-box .coupon-info p {
 font-size:.28rem;
 margin-top:.2rem;
 line-height:1.5em;
 height:3em;
 overflow:hidden
}
.page-user-coupon .xe-dialog-box .qrcode {
 width:4rem;
 height:4rem;
 background:#fff;
 padding:.2rem;
 border-radius:.16rem;
 margin:.36rem auto
}
.page-user-coupon .xe-dialog-box .qrcode img {
 display:block;
 width:100%
}
.page-user-coupon .xe-dialog-box .text {
 color:rgba(0,0,0,.3)
}
@media (-webkit-min-device-pixel-ratio:2),(min-resolution:2dppx) {
 .page-user-coupon li .coupon-item .coupon-info .coupon-useful:before {
  border-radius:.08rem
 }
 .page-user-coupon li .coupon-item .coupon-action .coupon-btn:before {
  border-radius:1.12rem
 }
}
@media (-webkit-min-device-pixel-ratio:3),(min-resolution:3dppx) {
 .page-user-coupon li .coupon-item .coupon-info .coupon-useful:before {
  border-radius:.12rem
 }
 .page-user-coupon li .coupon-item .coupon-action .coupon-btn:before {
  border-radius:1.68rem
 }
}
